<template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">目标任务年度建立</h2>
            </div>
        </el-card>
        <br />
        <el-card>
            <!--头部搜索等功能-->
            <el-row>
                <el-col :span="4">
                    <el-input v-model="combineSearchForm.inputCodeId" placeholder="请输入内容">
                        <template slot="prepend">代码：</template>
                    </el-input>
                </el-col>
                <el-col :span="4" style="margin-left: 10px">
                    <el-input v-model="combineSearchForm.inputName" placeholder="请输入内容">
                        <template slot="prepend">名称：</template>
                    </el-input>
                </el-col>
                <el-col :span="1" style="margin-left: 5px">
                    <el-button type="primary" @click="combineSearch">查询</el-button>
                </el-col>
                <el-col :span="1">
                    <download-excel :data="json_data" :fields="json_fields" name="目标任务年度建立导出表.xls" style="display: inline">
                        <el-button type="success" @click="handleDownload">导出</el-button>
                    </download-excel>
                </el-col>
                <el-col :span="1">
                    <el-button type="info" @click="insertTargetMarkYearMake">新增</el-button>
                </el-col>
            </el-row>
            <br />
            <!--表格部分-->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="code" label="代码" width="180"> </el-table-column>
                <el-table-column prop="name" label="名称"> </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editYearTargetTask(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteYearTargetTask(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <!--分页部分-->
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total"
            >
            </el-pagination>
        </el-card>
        <!--添加年度任务报表弹出框-->
        <el-dialog title="新增目标任务年度" :visible.sync="dialogVisible" width="30%">
            <el-form :model="targetMarkYearMakeForm" label-width="80px">
                <el-form-item label="代码" style="width: 60%">
                    <el-input v-model="targetMarkYearMakeForm.codeId" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="名称" style="width: 60%">
                    <el-input v-model="targetMarkYearMakeForm.name" placeholder="必填"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addYearTargetMark(1)" type="success">保存</el-button>
                <el-button type="primary" @click="addYearTargetMark(0)">保存并继续添加</el-button>
                <el-button @click="cancelAddYearTargetMark">取 消</el-button>
            </span>
        </el-dialog>
        <!--编辑年度任务报表弹出框-->
        <el-dialog title="编辑目标任务年度" :visible.sync="editdialogVisible" width="30%">
            <el-form :model="editTargetMarkYearMakeForm" label-width="80px">
                <el-form-item label="代码" style="width: 60%">
                    <el-input v-model="editTargetMarkYearMakeForm.code" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="名称" style="width: 60%">
                    <el-input v-model="editTargetMarkYearMakeForm.name" placeholder="必填"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pushEditYearTargetTask(editTargetMarkYearMakeForm.id, editTargetMarkYearMakeForm)" type="success"
                    >保存</el-button
                >
                <el-button @click="cancelEditYearTargetMark">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import yearTargetApi from '../../../../api/yearTagetApi';
export default {
    data() {
        return {
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            targetMarkYearMakeForm: {},
            editTargetMarkYearMakeForm: {},
            dialogVisible: false,
            editdialogVisible: false,
            combineSearchForm: {
                inputCodeId: '',
                inputName: ''
            },
            tableData: [],
            json_data: [],
            json_fields: {
                代码: 'code', //常规字段
                名称: 'name' //支持嵌套属性
            },
            json_meta: [
                [
                    {
                        key: 'charset',
                        value: 'utf-8'
                    }
                ]
            ]
        };
    },
    methods: {
        // 分页函数
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.getTableData();
        },
        // 分页函数
        handleCurrentChange(current) {
            this.pageInfo.pageNum = current;
            this.getTableData();
        },
        // 新增目标任务年度函数
        insertTargetMarkYearMake() {
            this.dialogVisible = true;
        },
        async getTableData() {
            await yearTargetApi.findAll().then((res) => {
                this.pageInfo.total = res.data.length;
            });
            await yearTargetApi.getPageTargetYearTask(this.pageInfo.pageNum, this.pageInfo.pageSize).then((res) => {
                this.tableData = res.data;
            });
        },
        // 提交编辑
        async pushEditYearTargetTask(id, targetMarkYearMakeForm) {
            await yearTargetApi.editTargetYearTask(id, targetMarkYearMakeForm.code, targetMarkYearMakeForm.name).then((res) => {
                this.editdialogVisible = false;
                this.$message.success('修改成功！');
                this.getTableData();
            });
        },
        // 编辑功能
        async editYearTargetTask(id) {
            this.editdialogVisible = true;
            await yearTargetApi.getTargetYearTask(id).then((res) => {
                this.editTargetMarkYearMakeForm = res.data;
            });
        },
        // 取消编辑
        cancelEditYearTargetMark() {
            this.editdialogVisible = false;
            this.editTargetMarkYearMakeForm = {};
        },
        // 新增功能
        async addYearTargetMark(flag) {
            await yearTargetApi.insertTargetYearTask(this.targetMarkYearMakeForm).then((res) => {
                this.$message({
                    message: '目标任务年度建立成功！',
                    type: 'success'
                });
            });
            this.getTableData();
            if (flag) {
                this.dialogVisible = false;
            }
            this.targetMarkYearMakeForm = {};
        },
        cancelAddYearTargetMark() {
            this.dialogVisible = false;
            this.targetMarkYearMakeForm = {};
        },
        // 删除功能
        async deleteYearTargetTask(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                await yearTargetApi.deleteTargetYearTask(id).then((res) => {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.getTableData();
                });
            }
        },
        // 导出功能
        handleDownload() {
            for (let i = 0; i < this.tableData.length; ++i) {
                this.json_data[i] = {
                    code: this.tableData[i].code,
                    name: this.tableData[i].name
                };
            }
        },
        // 组合查询
        async combineSearch() {
            await yearTargetApi.getCombineSearch(this.pageInfo.pageNum,this.pageInfo.pageSize,this.combineSearchForm.inputCodeId,this.combineSearchForm.inputName).then(res=>{
                this.tableData = res.data;
            })
        }
    },
    created() {
        this.getTableData();
    }
};
</script>

<style scoped>
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
</style>